<template>
	<view class="container">
	    <!-- 选项卡 -->
	    <view class="tabs">
	      <view 
	        class="tab-item" 
	        :class="{active: activeTab === 'pending'}"
	        @click="switchTab('pending')"
	      >
	        进行中（{{pendingCount}}）
	      </view>
	      <view 
	        class="tab-item" 
	        :class="{active: activeTab === 'completed'}"
	        @click="switchTab('completed')"
	      >
	        已完成（{{completedCount}}）
	      </view>
	    </view>
	
	    <!-- 筛选栏 -->
	    <view class="filter-bar">
	      <picker @change="changeMethod" :value="selectedMethod" :range="methods">
	        <view class="filter-item">
	          维修方式：{{methods[selectedMethod]}}
	          <uni-icons type="arrowdown" size="14" color="#666"/>
	        </view>
	      </picker>
	    </view>
	
	    <!-- 订单列表 -->
	    <scroll-view scroll-y class="order-list">
	      <view 
	        v-for="(item, index) in filteredOrders"
	        :key="item.id"
	        class="order-item"
	        @click="viewDetail(item.id)"
	      >
	        <view class="order-header">
	          <text class="order-number">维修单号：{{item.sn}}</text>
	          <text class="order-status" :class="item.status">{{statusMap[item.status]}}</text>
	        </view>
	        <view class="order-info">
	          <text class="label">维修方式：</text>
	          <text>{{item.method}}</text>
	        </view>
	        <view class="order-info">
	          <text class="label">预约日期：</text>
	          <text>{{item.date}}</text>
	        </view>
	      </view>
	    </scroll-view>
	  </view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	
	// 模拟数据
	const orders = ref([
	  {
	    id: 1,
	    sn: '3535252',
	    method: '到店维修',
	    date: '2022/11/10 11:00',
	    status: 'completed'
	  },	
	  {
	    id: 2,
	    sn: '3535252',
	    method: '到店维修',
	    date: '2022/11/10 11:00',
	    status: 'pending'
	  },
	  {
	    id: 3,
	    sn: '3535252',
	    method: '上门维修',
	    date: '2022/11/10 11:00',
	    status: 'completed'
	  },
	  {
	    id: 4,
	    sn: '3535252',
	    method: '上门维修',
	    date: '2022/11/10 11:00',
	    status: 'pending'
	  }
	])
	
	// 响应式状态
	const activeTab = ref('pending')
	const selectedMethod = ref(0)
	const methods = ['全部', '上门维修', '到店维修']
	
	// 计算属性
	const filteredOrders = computed(() => {
	  return orders.value.filter(order => {
	    const statusMatch = order.status === activeTab.value
	    const methodMatch = selectedMethod.value === 0 || 
	      order.method === methods[selectedMethod.value]
	    return statusMatch && methodMatch
	  })
	})
	
	const pendingCount = computed(() => orders.value.filter(o => o.status === 'pending').length)
	const completedCount = computed(() => orders.value.filter(o => o.status === 'completed').length)
	
	const statusMap = {
	  pending: '进行中',
	  completed: '已完成'
	}
	
	// 方法
	const switchTab = (tab) => {
	  activeTab.value = tab
	}
	
	const changeMethod = (e) => {
	  selectedMethod.value = e.detail.value
	}
	
	const viewDetail = (orderId) => {
		console.log(orderId)
	  uni.navigateTo({
	    url: `/pages/gmh/recor_detail/recor_detail?id=${orderId}`
	  })
	}
</script>

<style>
	    .container {
	      background: #f5f5f5;
	      min-height: 100vh;
	    }
	    
	    /* 选项卡样式 */
	    .tabs {
	      display: flex;
	      background: #fff;
	      padding: 10px 0;
	    }
	    
	    .tab-item {
	      flex: 1;
	      text-align: center;
	      font-size: 15px;
	      color: #666;
	      padding: 15px 0;
	      position: relative;
	    }
	    
	    .tab-item.active {
	      color: #007AFF;
	    }
	    
	    .tab-item.active::after {
	      content: '';
	      position: absolute;
	      bottom: 0;
	      left: 50%;
	      transform: translateX(-50%);
	      width: 40px;
	      height: 2px;
	      background: #007AFF;
	    }
	    
	    /* 筛选栏 */
	    .filter-bar {
	      background: #fff;
	      padding: 12px 15px;
	      border-bottom: 1px solid #eee;
	    }
	    
	    .filter-item {
	      display: flex;
	      align-items: center;
	      gap: 4px;
	      color: #666;
	      font-size: 14px;
	    }
	    
	    /* 订单列表 */
	    .order-list {
	      padding: 12px;
	    }
	    
	    .order-item {
	      background: #fff;
	      border-radius: 6px;
	      padding: 12px;
	      margin-bottom: 10px;
	      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	    }
	    
	    .order-header {
	      display: flex;
	      justify-content: space-between;
	      margin-bottom: 12px;
	    }
	    
	    .order-number {
	      color: #333;
	      font-size: 14px;
	    }
	    
	    .order-status {
	      font-size: 13px;
	      color: #007AFF;
	    }
	    
	    .order-status.completed {
	      color: #999;
	    }
	    
	    .order-info {
	      font-size: 13px;
	      color: #666;
	      margin-bottom: 6px;
	      display: flex;
	    }
	    
	    .order-info .label {
	      color: #999;
	      min-width: 72px;
	    }   
</style>
